<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <view class="header-timer">
          <text class="text">2027-07-19 14:50</text>
        </view>
      </view>
    </hx-navbar>
    <view class="form">
      <u--form
          labelPosition="top"
          :model="model"
      >
        <u-form-item
            label="客户"
            borderBottom
            required
        >
          <view>
            <text class="input-text">{{ '请选择客户' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="业务员"
            borderBottom
            required
            labelWidth="70"
        >
          <view>
            <text class="input-text">{{ '请选择业务员' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="类别"
            borderBottom
            required
        >
          <view>
            <text class="input-text">{{ '请选择类别' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="提货"
            borderBottom
            required
        >
          <view>
            <text class="input-text">{{ '请选择提货' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="定金"
            borderBottom
            required
        >
          <u--input
              v-model="model.unitPrice"
              border="none"
              type="number"
              placeholder="请输入定金"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="账户"
            borderBottom
            required
        >
          <view>
            <text class="input-text">{{ '请选择账户' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="备注"
            borderBottom
            required
        >
          <u--textarea placeholder="请输入备注" count ></u--textarea>
        </u-form-item>
      </u--form>
    </view>

    <view class="bottom-view">
      <view class="info">
        <view class="label">
          <text class="input-text">共</text>
        </view>
        <view class="msg">
          <view class="text">0匹</view>
          <view class="text r">0元</view>
        </view>
      </view>
      <view class="button">
        <view class="product" @click="productChange">
          <text class="text">选产品</text>
        </view>
        <view class="button">
          <u-button type="primary" text="保存"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'customer-product-go-result',
    data() {
      return {
        config: {
          title: "客户订单",
          color: "#ffffff",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
          rightButton: [
            {
              key: "btn1",
              icon: "&#xe6fc;",
              position: "left",
            },
          ],
        },
        model: {}
      }
    },
    methods: {
      clickBtn(item) {
        if (item.key === "btn1") {

        }
      },
      productChange() {
        uni.navigateTo({
          url: 'pages/application/pages/cloth/customer-product/index'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .header-timer {
    padding: 20rpx;
    padding-top: 0;
    text-align: center;

    .text {
      font-size: 16rpx;
    }
  }

  .form {
    margin: 0 20rpx 20rpx;
    margin-top: 80rpx;
    margin-bottom: 0;
    padding: 10rpx 30rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
  }

  .input-text {
    color: #b3b3b3;
  }

  .bottom-view {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx;
    background-color: #FFFFFF;

    .info {
      display: flex;
      align-items: center;

      .label {
        margin-right: 10rpx;
      }

      .msg {
        .text {
          font-size: 20rpx;
          color: #29b929;
          &.r {
            color: red;
          }
        }
      }
    }

    .button {
      display: flex;
      align-items: center;
      .product {
        margin-right: 20rpx;
        .text {
          font-size: 30rpx;
          color: #60b4f6;
          font-weight: bolder;
        }
      }

      .button {
        width: 150rpx;
      }
    }
  }
</style>
